<template>
  <div class="shopitem">
    <div class="main" v-for="item in shoplist" :key="item.id">
        <van-checkbox v-model="item.stockout_reserved" checked-color="green" @click="checkNum(item)"></van-checkbox>
        <div class="lisItem">
            <img :src="item.small_image" alt="">
            <div class="lis-rig">
                <h3>{{item.name}}</h3>
                <div class="price">
                    <p>{{item.price}}</p>
                    <van-stepper v-model="item.num" theme="round" button-size="22" disable-input @plus="onJia(item)" />
                </div>
            </div>
        </div>
    </div>
    <van-submit-bar :price="num" button-text="提交订单" @submit="onSubmit">
        <van-checkbox v-model="active" checked-color="green" @click="checkAll()">全选</van-checkbox>
        <van-button color="linear-gradient(to right, #ff6034, #ee0a24)">
        删除
      </van-button>
    </van-submit-bar>
  </div>
</template>

<script>
export default {
    name:"ShopItem",
    data(){
        return {
            active:false,
            value: 1,
            num:0,
        }
    },
    props:["shoplist"],
    methods: {
        checkAll(){
            this.$store.commit("checkAll");
            this.onMonye();
        },
        onSubmit(){
            console.log("提交成功");
            this.$router.push("cart");
        },
        checkNum(bool){
            // console.log(bool)
            this.$store.commit("onClick",bool);
            this.fn(); 
            this.onMonye();
        },
        onJia(item){
            this.$store.commit("onJia",item);
            // this.num=this.$store.state.price*100;
            this.onMonye();
        },
        fn(){
            let a=this.shoplist.length;
            let bool=this.shoplist.filter(item=>{
                return item.stockout_reserved==true;
            })
            if(a==bool.length){
                this.shoplist.forEach(item =>{
                    this.active=true;
                    return item.stockout_reserved=true;
                });
                
            }else{
                this.active=false;
            }
            console.log(a,bool);
            this.onMonye();
        },
        onMonye(){
            this.num=0;
            this.shoplist.forEach(item=>{
                if(item.stockout_reserved){
                    this.num+=item.price*item.num*100;
                    this.$store.commit('onMonye',this.num);
                }
            })            
        },
        // onClear(){
        //     // let arr=this.shoplist.find(item=>item.stockout_reserved==false)
        //     // this.$store.commit("onList",arr);
        //     // this.onMonye();
        // }
    },
    created(){
        this.fn();
        // // this.checkAll();
        this.num=this.$store.state.price;
        this.active=this.$store.state.checked;
    },
    mounted() {
        // this.onClear();
    },
}
</script>

<style lang="scss" scoped>
    .shopitem{
        width: 100vw;
        height: 50vh;
        overflow: auto;
        .main{
            width:calc(100vw - .2rem);
            height: 1.7rem;
            display:flex;
            justify-content:space-between;
            align-items: center;
            padding-left:.2rem;
            .lisItem{
                width:90%;
                padding:0 .1rem;
                display:flex;
                justify-content:flex-start;
                img{
                    width: 1.2rem;
                    height: 1.2rem;
                    margin-right:.1rem;
                }
                .lis-rig{
                    width: 90%;
                    display:flex;
                    flex-direction:column;
                    .price{
                        display:flex;
                        justify-content: space-between;
                    }
                }
            }
            
        } 
        .van-submit-bar{
            bottom:.9rem;
        }
    }
</style>